<!DOCTYPE html>
<html>
<head>
	<% include link %>
	<style type="text/css">
		.views{
			color: #000;
			margin:0px auto;
			display:block;
		}
		.views:hover{
			color: #337ab7;
		}
		.views div p{
			/*cursor: pointer;*/
		}
	</style>
</head>
<body>
	<% include head %>
	<% include subtitle %>
	<div class="container">
		<div class="row" style="margin-bottom: 20px;">
		</div>
	</div>
	<div class="container">
		<div class="container-fluid">
			<div class="col-sm-12 col-md-6">
				<div id="myCarousel" class="carousel slide">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>
					<!-- 轮播（Carousel）项目 -->
					<!-- img width=525px height=248px -->
					<div class="carousel-inner">
						<div class="item active">
							<a href="#"><img src="/video/<%-video[0].img%>" class="index-carousel-img"  style="width:100%;" alt="First slide"></a>
							<div class="carousel-caption">
								title
							</div>
						</div>
						<div class="item">
							<a href="#"><img src="/video/<%-video[0].img%>" class="index-carousel-img" style="width:100%;" alt="Second slide"></a>
							<div class="carousel-caption">
								title
							</div>
						</div>
						<div class="item">
							<a href="#"><img src="/video/<%-video[0].img%>" class="index-carousel-img" style="width:100%;" alt="Third slide"></a>
							<div class="carousel-caption">
								title
							</div>
						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="carousel-control left" href="#myCarousel" 
					   data-slide="prev">&lsaquo;</a>
					<a class="carousel-control right" href="#myCarousel" 
					   data-slide="next">&rsaquo;</a>
				</div> 
			</div>
		
		</div>
	</div>
	<div class="container">
		<div class="container-fluid">
		<h1>&nbsp;&nbsp;<a href="/video">video<small>...</small></a></h1>
			<% for(var i=0; i < video.length; i++){%>
				<div class="col-sm-6 col-md-3">
					<a class="views" target="_blank" href="/video/av/<%-video[i]._id%>">
						<img class="index-bg-img" style="width:100%;" src="/video/<%-video[i].img%>" alt="...">
						<div class="caption">
							<p title="<%-video[i].info%>"><%-video[i].name%></p>
						</div>
					</a>
				</div>
			<%}%>
		</div>
	</div>
	<div class="container">
		<div class="row" style="margin-bottom: 20px;">
		</div>
	</div>
	<div class="container">
		<div class="container-fluid">
		<h1>&nbsp;&nbsp;<a href="/articles">article<small>...</small></a></h1>
		<% for(var i=0; i< articles.length; i++){%>
			<div class="col-sm-6 col-md-3 ">
				<a class="views" target="_blank" href="/articles/read/<%-articles[i]._id%>">
					<img class="index-bg-img" style="width:100%;" src="/article/<%-articles[i].img%>" alt="...">
					<div class="caption">
						<p title="<%-articles[i].name%>"><%-articles[i].name%></p>
					</div>
				</a>
			</div>
		<%}%>
		</div>
	</div>

	<% include foot %>
<script>
	var img_height = ($('.index-bg-img').width() )*10/16;
	$('.index-bg-img').css('height',img_height);

	var carousel_height = ($('.index-carousel-img').width())*248/525;
	$('.index-carousel-img').css('height',carousel_height);

	window.onresize=function(){
	img_height = ($('.index-bg-img').width() )*10/16;
	$('.index-bg-img').css('height',img_height);

	carousel_height = ($('.index-carousel-img').width())*248/525;
	$('.index-carousel-img').css('height',carousel_height);
	}

	$('.dropdown-toggle').dropdown()

	$('.carousel').carousel({
		interval: 3000
	})
</script>
</body>
<script>
	
</script>
</html>